<template>
  <div style="display:block;" class="resume_template">
    <el-dialog title="个人简历" :visible.sync="show" @close="closeWin" >
      <div v-if="template=='A00010009'" class="page-A00010009-info">
        <div class="area-a text-center">
          个人求职登记表
        </div>
        <div class="top">
          <div class="left-area">
            {{bean.company_name}}
          </div>
          <div class="middle-area text-center">

          </div>
          <div class="right-area">
            登记日期：{{bean.create_time}}
          </div>
        </div>
        <table  class=" main-table text-center" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td>姓名</td>
            <td>{{bean.name}}</td>
            <td>身份证号</td>
            <td colspan="3">{{bean.id_number}}</td>
            <td rowspan="5" colspan="2" class="">
              <img v-if="company.is_show_header=='1'&&bean.avatar&&bean.avatar!='null'" :src="bean.avatar_url" alt="" class="img-responsive"/>
            </td>
          </tr>
          <tr>
            <td>出生年月</td>
            <td>{{bean.birthday}}</td>
            <td>性别</td>
            <td>{{bean.gende | show_basedatas('gender')}}</td>
            <td>民族</td>
            <td>{{bean.nation | show_basedatas('nation')}}</td>
          </tr>
          <tr>
            <td>视力</td>
            <td>
              左:{{bean.ext_info_obj.left_vision}} 右:{{bean.ext_info_obj.right_vision}}
            </td>
            <td>身高</td>
            <td>{{bean.ext_info_obj.m_height}} cm</td>
            <td>体重</td>
            <td>{{bean.ext_info_obj.m_weight}} kg</td>

          </tr>
          <tr>
            <td>政治面貌</td>
            <td>{{bean.ext_info_obj.political_type}}</td>
            <td>婚姻状况</td>
            <td>{{bean.ext_info_obj.marry_flag}}</td>
            <td>健康状况</td>
            <td>{{bean.ext_info_obj.health_type}}{{bean.ext_info_obj.health_remark}}</td>
          </tr>
          <tr>
            <td>手机号码</td>
            <td>{{bean.mobile}}</td>
            <td>其它号码</td>
            <td colspan="3">-</td>
          </tr>
          <tr>
            <td>户口所在地</td>
            <td colspan="7" class="text-left">{{bean.id_address}}</td>
          </tr>
          <tr>
            <td colspan="1">紧急联系人</td>
            <td>{{bean.ext_info_obj.link_person}}</td>
            <td colspan="2">紧急联系人电话</td>
            <td colspan="2">{{bean.ext_info_obj.link_mobile}}</td>
            <td>介绍人</td>
            <td>{{bean.ext_info_obj.recommendPerson}}</td>
          </tr>
          <tr>
            <td>最高学历</td>
            <td>{{bean.ext_info_obj.education}}</td>
            <td>毕业学校专业</td>
            <td colspan="5">{{bean.ext_info_obj.graduate_collage}} {{bean.ext_info_obj.major}}</td>
          </tr>
          <tr>
            <td>计算机水平</td>
            <td>{{bean.ext_info_obj.computer_level}}</td>
            <td>英语水平</td>
            <td colspan="5"> {{bean.ext_info_obj.englishLevel}}</td>
          </tr>
          <tr>
            <td>特长/证书</td>
            <td colspan="7">{{bean.ext_info_obj.otherCertificate}}</td>
          </tr>
          <tr >
            <td rowspan="2">相关工作简历</td>
            <td>起始时间</td>
            <td>终止时间</td>
            <td colspan="3">工作单位</td>
            <td colspan="2">工作职位</td>
          </tr>
          <tr class="text-center" v-for="item in bean.ext_info_obj.work_experience">
            <td>{{item[0]?item[0]:"&nbsp;"}}</td>
            <td>{{item[1]}}</td>
            <td colspan="3">{{item[2]}}</td>
            <td colspan="2">{{item[3]}}</td>
          </tr>
          <tr >
            <td rowspan="3">家庭情况</td>
            <td>姓名</td>
            <td>称呼</td>
            <td>年龄</td>
            <td colspan="2">工作单位</td>
            <td colspan="2">联络电话</td>
          </tr>
          <tr class="text-center"  v-for="item in bean.ext_info_obj.family_situation">
            <td>{{item[0]?item[0]:"&nbsp;"}}</td>
            <td>{{item[1]}}</td>
            <td>{{item[2]}}</td>
            <td colspan="2">{{item[3]}}</td>
            <td colspan="2">{{item[4]}}</td>
          </tr>
          <tr>
            <td>求职岗位</td>
            <td colspan="7">{{bean.job_name}}</td>
          </tr>
          <tr class="tr_1">
            <td>福利要求</td>
            <td class="text-left" colspan="7">
              <span>{{(bean.ext_info_obj.benefit_demand&&bean.ext_info_obj.benefit_demand.indexOf('社会保险')!=-1?'✔':'〇') +'社会保险'}}</span>
              <span>&nbsp;&nbsp;{{(bean.ext_info_obj.benefit_demand&&bean.ext_info_obj.benefit_demand.indexOf('住宿')!=-1?'✔':'〇') +'住宿'}}</span>
              <span>&nbsp;&nbsp;{{(bean.ext_info_obj.benefit_demand&&bean.ext_info_obj.benefit_demand.indexOf('工作餐')!=-1?'✔':'〇') +'工作餐'}}</span>
              <span>&nbsp;&nbsp;&nbsp;&nbsp; 其他: {{bean.ext_info_obj.benefit_other}}</span>
            </td>
          </tr>
          <tr class="tr_1">
            <td>承诺</td>
            <td class="text-left" colspan="7">
              1.本人承诺上述内容真实，不含虚假内容。<br/>
              2.本人既往病史:
              <span>{{(bean.ext_info_obj.disease_organ&&bean.ext_info_obj.disease_organ.indexOf('肺')!=-1?'✔':'〇') +'肺'}}</span>
              <span>&nbsp;&nbsp;{{(bean.ext_info_obj.disease_organ&&bean.ext_info_obj.disease_organ.indexOf('肾')!=-1?'✔':'〇') +'肾'}}</span>
              <span>&nbsp;&nbsp;{{(bean.ext_info_obj.disease_organ&&bean.ext_info_obj.disease_organ.indexOf('肝')!=-1?'✔':'〇') +'肝'}}</span>
              <span>&nbsp;&nbsp;{{(bean.ext_info_obj.disease_organ&&bean.ext_info_obj.disease_organ.indexOf('心脏')!=-1?'✔':'〇') +'心脏'}}</span>
              <span>&nbsp;&nbsp;{{(bean.ext_info_obj.disease_organ&&bean.ext_info_obj.disease_organ.indexOf('高血压')!=-1?'✔':'〇') +'高血压'}}</span>
              <span>&nbsp;&nbsp;{{(bean.ext_info_obj.disease_organ&&bean.ext_info_obj.disease_organ.indexOf('精神疾病')!=-1?'✔':'〇') +'精神疾病'}}</span>
              <span>&nbsp;&nbsp;{{(bean.ext_info_obj.disease_organ&&bean.ext_info_obj.disease_organ.indexOf('肿瘤')!=-1?'✔':'〇') +'肿瘤'}}</span>
              <span>&nbsp;&nbsp;&nbsp;&nbsp; {{ (bean.ext_info_obj.health_type=='无病史'?'✔':'〇')+'无'}}</span>

            </td>
          </tr>
        </table>
        <!--<div class="botton-wrap">-->
          <!--<button type="button" class="paper do-download">下载</button>-->
        <!--</div>-->
      </div>
      <div v-if="template=='A00010011'" class="page-A00010011-info">
        <div class="logo-area">
          <img :src="bean.company_logo" alt="" class="img-responsive"/>
        </div>
        <div class="area-a text-center">
          英格玛人力资源集团 <br/>
          员工(雇员)信息登记表
        </div>
        <div class="top-text">
          <div class="left-area">
            供职项目单位：________________
          </div>
          <div class="middle-area text-center">

          </div>
          <div class="right-area">
            编号：（公司填写）________________
          </div>
        </div>
        <table  class=" main-table text-center" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td  style="width:11%">姓名</td>
            <td  style="width:8%">{{bean.name}}</td>
            <td style="width:8%">性别</td>
            <td  style="width:8%">{{bean.gender | show_basedatas('gender')}}</td>
            <td style="width:8%">籍贯</td>
            <td style="width:8%">{{bean.id_address | getProvince}}</td>
            <td style="width:8%">民族</td>
            <td style="width:8%">{{bean.nation | show_basedatas('nation')}}</td>
            <td style="width:8%">婚否</td>
            <td style="width:8%">{{bean.ext_info_obj.marry_flag}}</td>

            <td rowspan="4" colspan="2" class="">
              <img v-if="company.is_show_header=='1'&&bean.avatar&&bean.avatar!='null'" :src="bean.avatar_url" alt="" class="img-responsive" style="width:130px;"/>
            </td>
          </tr>
          <tr>
            <td>生源来源</td>
            <td colspan="9">
              <span>{{(bean.ext_info_obj.worker_source=='市内'?'✔':'〇') +'市内'}}</span>
              <span>&nbsp;&nbsp;{{(bean.ext_info_obj.worker_source=='门店'?'✔':'〇') +'门店'}}</span>
              <span>&nbsp;&nbsp;{{(bean.ext_info_obj.worker_source=='内荐/自招'?'✔':'〇') +'内荐/自招'}}</span>
              <span>&nbsp;&nbsp;{{(bean.ext_info_obj.worker_source=='新进转包'?'✔':'〇') +'新进转包'}}</span>
              <span>&nbsp;&nbsp;{{(bean.ext_info_obj.worker_source=='在职转包'?'✔':'〇') +'在职转包'}}</span>
              <span>&nbsp;&nbsp;{{(bean.ext_info_obj.worker_source=='其他'?'✔':'〇') +'其他'}}</span>
              <span>&nbsp;&nbsp;{{(bean.ext_info_obj.worker_source=='市内'?'✔':'〇') +'市内'}}</span>
              <span class="underline">{{bean.ext_info_obj.other_source}}</span>
            </td>
          </tr>
          <tr>
            <td>出生年月</td>
            <td colspan="2">{{bean.birthday}}</td>
            <td>身份证号</td>
            <td colspan="6">{{bean.id_number}}</td>
          </tr>
          <tr>
            <td>学历</td>
            <td colspan="2">{{bean.ext_info_obj.education}}</td>
            <td>专业</td>
            <td>{{bean.ext_info_obj.major}}</td>
            <td>毕业学校</td>
            <td colspan="4">{{bean.ext_info_obj.graduate_collage}}</td>
          </tr>
          <tr>
            <td>户口</td>
            <td>{{bean.ext_info_obj.hukou_type}}</td>
            <td>联系电话</td>
            <td colspan="4">{{bean.mobile}}</td>
            <td>QQ号</td>
            <td colspan="4">&nbsp;</td>
          </tr>
          <tr>
            <td>户籍所在地</td>
            <td colspan="5" class="text-left">{{bean.id_address}}</td>
            <td>现住地址</td>
            <td colspan="5" class="text-left">{{bean.ext_info_obj.currentAddress}}</td>
          </tr>
          <tr >
            <td>紧急联系人</td>
            <td>称呼</td>
            <td>职业</td>
            <td colspan="5">工作单位</td>
            <td colspan="4">联络电话</td>
          </tr>
          <tr class="text-center" v-for="item in bean.ext_info_obj.family_situation">
            <td>{{item[0]?item[0]:"&nbsp;"}}</td>
            <td>{{item[1]}}</td>
            <td>{{item[2]}}</td>
            <td colspan="5">{{item[3]}}</td>
            <td colspan="4">{{item[4]}}</td>
          </tr>
          <tr>
            <td colspan="12">工作经历</td>
          </tr>
          <tr >
            <td colspan="2">时间</td>
            <td colspan="3">工作单位</td>
            <td>职位</td>
            <td colspan="6">工作内容及技能</td>
          </tr>
          <tr class="text-center" v-for="item in bean.ext_info_obj.work_experience">
            <td colspan="2">{{item[0]?item[0]:"&nbsp;"}}-{{item[1]}}</td>
            <td colspan="3">{{item[2]}}</td>
            <td>{{item[3]}}</td>
            <td colspan="6">{{item[4]}}</td>
          </tr>
          <tr>
            <td colspan="3">是否交过社保（公积金）</td>
            <td colspan="3">{{bean.ext_info_obj.shebao_type}}</td>
            <td colspan="3">有无转出 ：</td>
            <td colspan="3">{{bean.ext_info_obj.shebao_out}}</td>
          </tr>
          <tr class="tr_1">
            <td colspan="6">（身份证复印件正面粘贴处）</td>
            <td colspan="6">（身份证复印件反面粘贴处）</td>
          </tr>
        </table>
        <div>
          <div class="title">
            郑重声明：
          </div>
          <div>
            此登记表所填资料正确属实，无任何隐瞒或删改，如有虚假，我司有权解除合同并不支付任何补偿！
          </div>
        </div>
        <div>
          签名：_________________________填表日期：_________________________
        </div>
        <div style="font-size:10px;">
          备注：此表所有信息必须填写完整，不得留有空格；同时请将劳动合同书附于后页。
        </div>
        <!--<div class="botton-wrap">-->
          <!--<button type="button" class="paper do-download">下载</button>-->
        <!--</div>-->
      </div>
      <div v-if="template=='B88888888'" class="page-B88888888-info">
        <div class="top">
          <div class="left-area">
            <img v-if="bean.logo" :src="bean.logo" alt=""/>
          </div>
          <div class="middle-area text-center">
            员工信息登记表
          </div>
          <div class="right-area">
          </div>
        </div>
        <div class="flex-box">
          <div class="left-area">
            应聘岗位：{{bean.job_name}}
          </div>
          <div class="middle-area">
          </div>
          <div class="right-area">
            填表时间：{{bean.create_time}}
          </div>
        </div>
        <table border="1" class="text-center main-table">
          <tr class="tr_1">
            <td>姓名</td>
            <td>{{bean.name}}</td>
            <td>性别</td>
            <td>{{bean.gender | show_basedatas('gender')}}</td>
            <td>出生日期</td>
            <td><span v-if="bean.birthday!='0000-00-00'">{{bean.birthday}}</span></td>
            <td>年龄</td>
            <td><span v-if="bean.birthday!='0000-00-00'">{{bean.birthday | translateAge}}周岁</span></td>
            <td rowspan="4" colspan="2" class="">
              <img v-if="company.is_show_header=='1'&&bean.avatar&&bean.avatar!='null'" :src="bean.avatar_url" alt="" style="width:auto; height:150px;"/>
            </td>
          </tr>
          <tr class=" ">
            <td>民族</td>
            <td>{{bean.nation | show_basedatas('nation')}}</td>
            <td>籍贯</td>
            <td>{{bean.id_address | getProvince}}</td>
            <td>身份证号</td>
            <td colspan="3">{{bean.id_number}}</td>
          </tr>
          <tr>
            <td>政治面貌</td>
            <td>{{bean.ext_info_obj.political_type}}</td>
            <td>婚姻状况</td>
            <td>{{bean.ext_info_obj.marry_flag}}</td>
            <td>健康状况</td>
            <td>{{bean.ext_info_obj.health_type}}</td>
            <td>最高学历</td>
            <td>{{bean.ext_info_obj.education}}</td>
          </tr>
          <tr>
            <td>身高</td>
            <td>{{bean.ext_info_obj.m_height}}cm</td>
            <td>体重</td>
            <td>{{bean.ext_info_obj.m_weight}}kg</td>
            <td colspan="2">视力 左：{{bean.ext_info_obj.left_vision}} 右：{{bean.ext_info_obj.right_vision}}</td>
            <td>爱好特长</td>
            <td>{{bean.ext_info_obj.good_at}}</td>
          </tr>
          <tr>
            <td>血型</td>
            <td>{{bean.ext_info_obj.blood_type}}</td>
            <td>外语等级</td>
            <td>{{bean.ext_info_obj.englishLevel}}</td>
            <td>所获证书</td>
            <td>{{bean.ext_info_obj.otherCertificate}}</td>
            <td colspan="2">计算机等级</td>
            <td colspan="2">{{bean.ext_info_obj.computer_level}}</td>
          </tr>
          <tr>
            <td colspan="2" >户口住址</td>
            <td colspan="6" class="text-left">{{bean.id_address}}</td>
            <td>户口性质</td>
            <td >{{bean.ext_info_obj.hukou_type}}</td>
          </tr>
          <tr>
            <td>手机号码</td>
            <td>{{bean.mobile}}</td>
            <td colspan="2">紧急联系人</td>
            <td>{{bean.ext_info_obj.link_person}} </td>
            <td>联系电话</td>
            <td colspan="2">{{bean.ext_info_obj.link_mobile}}</td>
            <td>关系</td>
            <td>{{bean.ext_info_obj.link_relative}}</td>
          </tr>
          <tr>
            <td rowspan="4" class="font-bold">家庭成员</td>
            <td>姓名</td>
            <td>关系</td>
            <td colspan="3">单位</td>
            <td colspan="2">职务/身份</td>
            <td colspan="2">联系电话</td>
          </tr>
          <tr v-for="item in bean.ext_info_obj.family_situation">
            <td>{{item[0]?item[0]:"&nbsp;"}}</td>
            <td>{{item[1]}}</td>
            <td colspan="3">{{item[2]}}</td>
            <td colspan="2">{{item[3]}}</td>
            <td colspan="2">{{item[4]}}</td>
          </tr>
          <tr>
            <td rowspan="4" class="font-bold">学习经历</td>
            <td colspan="2">起止年月</td>
            <td colspan="3">学校名称</td>
            <td colspan="2">所学专业</td>
            <td colspan="2">取得证书</td>
          </tr>
          <tr  v-for="item in bean.ext_info_obj.study_experience">
            <td colspan="2">{{item[0]?item[0]:"&nbsp;"}}-{{item[1]}}</td>
            <td colspan="3">{{item[2]}}</td>
            <td colspan="2">{{item[3]}}</td>
            <td colspan="2">{{item[4]}}</td>
          </tr>
          <tr>
            <td rowspan="4" class="font-bold">工作经历</td>
            <td colspan="2">起止年月</td>
            <td colspan="2">单位名称</td>
            <td colspan="1">从事职务</td>
            <td colspan="1">离职原因</td>
            <td colspan="3">工作职责</td>
          </tr>
          <tr   v-for="item in bean.ext_info_obj.work_experience">
            <td colspan="2">{{item[0]?item[0]:"&nbsp;"}}-{{item[1]}}</td>
            <td colspan="2">{{item[2]}}</td>
            <td colspan="1">{{item[3]}}</td>
            <td colspan="1">{{item[4]}}</td>
            <td colspan="3">{{item[5]}}</td>
          </tr>
          <tr>
            <td>应聘来源</td>
            <td colspan="4">{{bean.ext_info_obj.is_recommend=='是' ? bean.ext_info_obj.recommendPerson : '社招'}}</td>
            <td colspan="2">是否有亲戚在公司</td>
            <td colspan="3">{{bean.ext_info_obj.has_family=='是' ? ('是：'+bean.ext_info_obj.family_name) : '否'}}</td>
          </tr>
          <tr>
            <td colspan="2">是否有竞业限制</td>
            <td colspan="3">{{bean.ext_info_obj.had_limit=='是' ? ('是：'+bean.ext_info_obj.had_limit_text) : '否'}}</td>
            <td colspan="2">是否有违法记录</td>
            <td colspan="3">{{bean.ext_info_obj.had_illegal=='是' ? ('是：'+bean.ext_info_obj.had_illegal_text) : '否'}}</td>
          </tr>
          <tr>
            <td colspan="5">与前用人单位劳动合同解除情况</td>
            <td colspan="5">{{bean.ext_info_obj.recentCompany}}</td>
          </tr>
          <tr>
            <td colspan="10" class="text-left">
              本人承诺以上所填资料全部属实，如有虚假行为，本人愿承担由此造成的一切法律责任。<br/>
              <span v-if="bean.dengji_sign_img&&bean.dengji_sign_img!='null'" style="line-height:1.5;display:inline-block;width:100%;text-align:right;padding-right:2em;">申请人
                    <img :src="bean.dengji_sign_img" style="width:100px;height:auto;max-height:40px;" />
                </span>
              <span style="line-height:1.5;display:inline-block;width:100%;text-align:right;padding-right:2em;">申请时间:
              <span style="display:inline-block;width:100px;text-align:right;">{{bean.create_time | showFixedTime}}</span></span>
            </td>
          </tr>
        </table>

        <!--<div class="botton-wrap">-->
          <!--<button type="button" class="paper do-download">下载</button>-->
        <!--</div>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import API from '@/api'
  import Http from '@/http'
  import Msg from '@/utils/msg'
  import _ from 'underscore'
  import util from '@/utils/common'
  import Store from '@/store'

  export default {
    name: "resumeTemplate",
    data() {
      return {
        bean: {
          ext_info_obj:{}
        },
        company:Store.getters.user.company,
        show: true
      }
    },
    props: {
      template: {
        type: String,
        default() {
          return ""
        }
      },
      id: {
        type: String,
        default() {
          return ""
        }
      },
    },
    computed: {},
    created() {
      this.loadResume()
    },
    methods: {
      closeWin() {
        this.$emit('resumeWinClose')
      },
      loadResume(){
        Http.getModel(API.get_dengji_info, {id: this.id}, false).then((json) => {
          this.dealing = false
          if (json.code == 0) {
            var bean = json.data
            var company_logo = this.company.logo;
            if (bean.ext_info) {
              bean.ext_info_obj = JSON.parse(bean.ext_info);
              console.log("ext_info_obj",bean.ext_info_obj.family_situation)
            } else {
              bean.ext_info_obj = {
                family_situation:[],
                work_experience:[],
                study_experience:[]
              };
            }
            if (company_logo) {
              bean.company_logo = company_logo;
            }
            if(bean.avatar){
              bean.avatar_url = this.decodeImg(bean.avatar)
            }
            var template = this.template
            if(template=='B88888888'){
              bean.ext_info_obj.family_situation = this.decodeStr(bean.ext_info_obj.family_situation,3)
              bean.ext_info_obj.work_experience = this.decodeStr(bean.ext_info_obj.work_experience,3)
              bean.ext_info_obj.study_experience = this.decodeStr(bean.ext_info_obj.study_experience,3)
            }
            if(template=='A00010011'){
              bean.ext_info_obj.work_experience = this.decodeStr(bean.ext_info_obj.work_experience,1)
              bean.ext_info_obj.study_experience = this.decodeStr(bean.ext_info_obj.study_experience,2)
            }
            if(template=='A00010009'){
              bean.ext_info_obj.family_situation = this.decodeStr(bean.ext_info_obj.family_situation,2)
              bean.ext_info_obj.work_experience = this.decodeStr(bean.ext_info_obj.work_experience,1)
            }
            this.bean = bean
          } else {
            Msg.error(json.msg)
          }
        })
      },
      decodeImg(value){
        if(value){
          var value = value;
          if(!util.startWith("http",value)){
            if(value.indexOf(",")>-1){
              return value
            }else{
              return "data:image/jpeg;base64,"+value
            }
          }
          return value;
        }else{
          return ''
        }
      },
      decodeStr(str,length){
        if(typeof(str)== 'object'){
          var obj_arr =str||[];
          console.log("obj_arr:",obj_arr);
          var obj_arr_2 = [];
          if(obj_arr.length<=length){
            for(var i=0;i<length;i++){
              if(obj_arr[i]){
                obj_arr_2[i]=obj_arr[i];
              }else{
                obj_arr_2[i]=[];
              }
            }
          }else{
            obj_arr_2 = obj_arr
          }
          return obj_arr_2;
        }
        if(typeof(str)=='string' ){
          console.log("str:",str)
          var str_arr = (str&&str.split("|"))||[];
          var obj_arr = [];
          var obj_arr_2 = [];
          for(var i=0;i<str_arr.length;i++){
            var text_arr = str_arr[i].split(",");
            obj_arr[i]=[];
            for(var j=0;j<text_arr.length;j++){
              obj_arr[i][j]=text_arr[j]
            }
          }
          if(obj_arr.length<=length){
            var obj_arr_2 = [];
            for(var i=0;i<length;i++){
              if(obj_arr[i]){
                obj_arr_2[i]=obj_arr[i];
              }else{
                obj_arr_2[i]=[];
              }
            }
          }else{
            obj_arr_2 = obj_arr
          }
          return obj_arr_2;
        }
      },
    }
  };
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  table{
    border-collapse:collapse;
  }

  .page-A00010009-info{
    color:#333;
    font-size:12px;
    .top{
      display:flex;
      margin-bottom:10px;
      .middle-area{
        margin:20px  auto 0;
        font-size:30px;
        font-weight:bold;
        flex:1;
      }
      .left-area{
        font-size:20px;
        font-weight:bold;
      }
      .right-area{
        width:200px;
      }
    }
    .area-a{
      height:40px;
      font-size:30px;
      font-weight:bold;
      line-height:40px;
      letter-spacing: 8px;
      margin-bottom:20px;
    }
    .area-b,.area-c{
      height:32px;
      line-height:32px;
      font-size:14px;
      &.flex-box{
        display:flex;
        .flex-cell{
          flex:1;
        }
      }
    }
    .main-table{
      tr{
        td{
          font-size:14px;
          width:10%;
          text-align:center;
          line-height:2.5em;
          &.text-left{
            text-align:left;
          }
          &.font-bold{
            font-weight:bold;
          }
          &.big-letter-space{
            letter-spacing: .5em;
          }
        }
      }
    }
    .botton-wrap{
      width:300px;
      margin:30px auto;
      display:flex;
      justify-content: space-between;
      >button{
        width:47%;
        height:40px;
        line-height:40px;
        text-align:center;
        color:#fff;
        background:#999999;
        outline: none;
        border:0;
        margin:0 auto;
      }
    }
  }
  .page-A00010011-info{
    .logo-area{
      text-align:right;
      img{
        width:140px;
        height:60px;
      }
    }
    .area-a{
      line-height:30px;
      font-size:24px;
      font-weightL:bold;
      margin:10px 0;
    }
    .top-text{
      display:flex;
      justify-content: space-between;
    }
    .main-table{
      margin:0 auto;
      width:100%;
      tr{
        td{

        }
      }
      .tr_1{
        height:200px;
      }
    }
    div{
      font-weight:bold;
      line-height:1.5;
    }
    .botton-wrap{
      width:300px;
      margin:30px auto;
      display:flex;
      justify-content: space-between;
      >button{
        width:47%;
        height:40px;
        line-height:40px;
        text-align:center;
        color:#fff;
        background:#999999;
        outline: none;
        border:0;
        margin:0 auto;
      }
    }
  }
  .page-B88888888-info{
    color:#333;
    font-size:12px;
    .top{
      height:70px;
      display:flex;
      .middle-area{
        width:100%;
        position:absolute;
        margin:20px  auto 0;
        font-size:20px;
        font-weight:bold;
        flex:1;
      }
      .left-area{
        img{
          width:120px;
          height:auto;
          max-height:60px;
        }
      }
      .right-area{
        align-self:flex-end;
        font-weight:bold;
      }
    }
    .flex-box{
      height:30px;
      display:flex;
      .middle-area{
        margin:20px  auto 0;
        font-size:20px;
        font-weight:bold;
        flex:1;
      }
      .left-area{
        width:200px;
      }
      .right-area{
        width:200px;
        align-self:flex-end;
        font-weight:bold;
      }
    }
    .main-table{
      width:100%;
      tr{
        td{
          width:10%;
          line-height:3;
          &.text-left{
            text-align:left;
          }
          &.font-bold{
            font-weight:bold;
          }
          span{
            &.font-bold{
              font-weight:bold;
            }
            &.text-indent-2{
              text-indent:2em;
              display:inline-block;
            }
          }
        }
      }
    }
    .tips{
      padding:20px;
      &.text-right{
        margin-right:6em;
      }
    }
    .botton-wrap{
      width:300px;
      margin:30px auto;
      display:flex;
      justify-content: space-between;
      >button{
        width:47%;
        height:40px;
        line-height:40px;
        text-align:center;
        color:#fff;
        background:#999999;
        outline: none;
        border:0;
        margin:0 auto;
      }
    }
  }
</style>
